<template>
  <!-- 新闻通报等 -->
  <div class="article">
    <div class="articleTitle">
      <div class="articleTitle-list">
        <div
          class="articleTitle-listItem"
          v-for="(item, index) in articleContent"
          :key="index"
          :class="{ activeTitle: activeTitleIndex == index }"
          @click="articleTitleChange(index, item)"
        >
          {{ item.dictLabel }}
        </div>
      </div>
    </div>

    <div class="articleContent">
      <div
        :class="{ 'articleContent-list': !showMoreList }"
        style="width: 100%"
      >
        <div
          class="articleContent-item hand"
          v-for="(item2, index2) in contentList"
          :key="index2"
          @click="toDetail(item2.id)"
        >
          <p class="articleIcon" style="width: 7%">
            <img src="@/assets/sthj/img/book.png" alt="" />
          </p>
          <p class="contentInfo" style="width: 80%">
            {{ item2.title }}
          </p>
          <p class="contentTime" style="width: 13%">
            {{ item2.pTime !=''?item2.pTime.substring(0,10) :''}}
          </p>
        </div>
      </div>

      <div class="showMore" v-show="contentList.length >= 9">
        <p class="more" @click="showMoreList = true" v-show="!showMoreList">
          查看更多
        </p>
        <p class="more" @click="showMoreList = false" v-show="showMoreList">
          收起
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HcdcpArticle",
  props: {
    articleContent: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      //文章内容列表
      activeTitleIndex: 0,
      contentList: [],
      showMoreList: false,
    };
  },
  watch: {
    articleContent: {
      deep: true,
      handler: function (newV) {
        this.getContent(newV[0]);
      },
    },
  },
  created() {},
  mounted() {},

  methods: {
    async articleTitleChange(index, item) {
      console.log(item);
      this.getContent(item);
      await this.$nextTick(() => {
        this.activeTitleIndex = index;
        if (this.contentList.length >= 9) {
          this.showMoreList = false;
        } else {
          this.showMoreList = true;
        }
      });
    },
    toDetail(id) {
      let { href } = this.$router.resolve({
        path:"wzxq",
        query:{
          id,
        }
       
      });
      window.open(href, "_blank");
    },
    async getContent(item) {
      let result = await this.request({
        url: this.$api.getSthjNewsList,
        data: {
          type: parseInt(item.dictValue),
          pageNum: 1,
          pageSize: 12,
          searchKey: "",
        },
      });
      result = result.data.list;
      this.contentList = result;
    },
  },
};
</script>

<style lang="less" scoped>
//文章
.activeTitle {
  background-color: white;
  border-top: 3px solid #00a878;
  color: #00a878 !important;
  font-weight: 550 !important;
}
.article {
  width: 100%;
  height: auto;
  margin-bottom: 50px;
  background-color: #fafafa;
}
// 文章头部标题
.articleTitle {
  width: 100%;
  height: 60px;
  background: #eeeeee;
  .articleTitle-list {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    .articleTitle-listItem {
      height: 100%;
      flex: 1;
      text-align: center;
      line-height: 60px;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #666666;
      cursor: pointer;
    }
  }
}

//文章内容区域
.articleContent {
  width: 1200px;
  margin: 0 auto;
  background-color: #ffffff;
  .articleContent-list {
    height: 540px;
    overflow: hidden;
  }
  .articleContent-item {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    p {
      height: 100%;
      line-height: 60px;
      text-align: center;
      list-style: 60px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #666666;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    p:nth-child(2) {
      text-align: left;
    }
  }
  .showMore {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    .more {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: bolder;
      color: #3d81d8;
      cursor: pointer;
      border-bottom: 2px solid #3d81d8;
    }
  }
}
</style>